<template>
  <div>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div class="filter-container">
        <el-button class="filter-item" type="primary" @click="handleAdd">
          新增图片
        </el-button>
      </div>
      <div class="filter-container">
        <el-button
          icon="el-icon-delete"
          class="filter-item"
          type="danger"
          plain
          @click="delMediaPictureSettingBatch"
          >批量删除
        </el-button>
        <el-button
          icon="el-icon-delete"
          class="filter-item"
          type="info"
          @click="delMediaPictureSettingReset"
          >全部清除
        </el-button>
      </div>
    </div>

    <el-table
      class="mt-10"
      :data="tableData"
      @selection-change="handleSelectionChange"
      
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="sPicturePath" label="图片">
        <template slot-scope="scope">
          <my-image :img="scope.row.sPicturePath"></my-image>
        </template>
      </el-table-column>
      <el-table-column prop="iDisplayTime" label="显示时长(秒)">
        <template slot-scope="scope">
          <!-- <el-input-number
            v-model="scope.row.iDisplayTime"
            :step="1"
            controls-position="right"
            step-strictly
            :min="0"
            :max="3600"
          ></el-input-number> -->
          {{ scope.row.iDisplayTime }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >修改
          </el-button>
          <!-- <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除
          </el-button> -->
          <el-popconfirm
            cancel-button-text="不用了"
            class="m-margin-l10"
            confirm-button-text="好的"
            icon="el-icon-info"
            icon-color="red"
            title="您确定删除当前媒体图片吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button slot="reference" size="mini" class="light_red_btn"
              >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <add-picture-dialog
      ref="addPictureDialogRef"
      @getMediaPictureSetting="getMediaPictureSetting"
    ></add-picture-dialog>
  </div>
</template>

<script>
import {
  getMediaPictureSettingApi,
  delMediaPictureSettingApi,
  delMediaPictureSettingBatchApi,
  delMediaPictureSettingResetApi,
} from "@/api/network";
export default {
  name: "MvCloudgateTerminalPicture",
  components: {
    uploadPicture: () => import("../components/uploadPicture.vue"),
    addPictureDialog: () => import("../components/addPictureDialog.vue"),
    myImage: () => import("../components/myImage.vue"),
  },
  data() {
    return {
      tableData: [],
      selectList: [],
    };
  },

  mounted() {},

  methods: {
    handleEdit(index, row) {
      this.$refs.addPictureDialogRef.open("修改", row);
    },
    handleDelete(index, row) {
      delMediaPictureSettingApi(row.id).then((res) => {
        console.log(res);
        this.$message.success("删除成功");
        // this.getMediaPictureSetting();
        this.tableData = [];
        this.$nextTick(() => {
          this.tableData = res;
        });
      });
      // this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(() => {
      //   delMediaPictureSettingApi(row.id).then((res) => {
      //     this.$message.success("删除成功");
      //     this.getMediaPictureSetting();
      //   });
      // });
    },
    delMediaPictureSettingBatch() {
      if (!this.selectList || this.selectList.length === 0) {
        this.$message.warning("请选择删除媒体图片");
        return;
      }

      let params = {
        id: [],
      };

      this.selectList.map((item) => {
        params.id.push(item.id);
      });

      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("span", null, `此操作将永久删除所选`),
          h("i", { style: "color: #f00" }, this.selectList.length),
          h("span", null, "个媒体图片, 是否继续?"),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            done();
          } else {
            done();
          }
        },
      }).then((action) => {
        delMediaPictureSettingBatchApi(params).then((res) => {
          this.$message.success("删除成功");
          this.getMediaPictureSetting();
        });
      });
    },
    delMediaPictureSettingReset() {
      this.$confirm("此操作将永久删除所有媒体图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMediaPictureSettingResetApi().then((res) => {
            this.$message.success("删除成功");
            this.getMediaPictureSetting();
          });
        })
        .catch(() => {});
    },
    getMediaPictureSetting() {
      getMediaPictureSettingApi().then((res) => {
        this.tableData = [];

        this.$nextTick(() => {
          this.tableData = res;
        });
      });
    },
    handleAdd() {
      this.$refs.addPictureDialogRef.open("新增");
    },
    handleSelectionChange(value) {
      this.selectList = [];
      for (let i = 0; i < value.length; i++) {
        this.selectList.push({ id: value[i].id });
      }
      // console.log(this.selectList);
    },
  },
};
</script>

<style lang="scss" scoped>
.mt-10 {
  margin-top: 10px;
}
</style>
